<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>支付密码设置</title>
  <link rel="stylesheet" type="text/css" href="__CSS__/shareh/api.css"/>
  <link rel="stylesheet" type="text/css" href="__CSS__/shareh/aui.css"/>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: white;
    }

    body {
      padding: 0.8rem;
    }

    .phone {
      display: flex;
      align-items: center;
      color: #999999;
      font-size: 0.6rem;
    }

    .phone .left {
      color: #454647;
      font-size: 0.7rem;
      margin-right: 1.1rem;
    }

    .item1 {
      display: flex;
      align-items: center;
      margin-top: 1.05rem;
    }

    .item1 .left {
      width: 9.075rem;
      height: 1.225rem;
      border: 1px solid rgba(153, 153, 153, 1);
      border-radius: 0.2rem;
      margin-right: 0.3rem;
      display: flex;
      align-items: center;
    }

    .item1 .left input {
      height: 1.225rem;
      line-height: 1.225rem;
      padding-left: 0.1rem;
      font-size: 0.6rem;
    }

    .item1 .right {
      color: #044D95;
      font-size: 0.6rem;
    }

    .item2 {
      display: flex;
      align-items: center;
      margin-top: 1.1rem;
    }

    .item2 .left {
      color: #454647;
      font-size: 0.7rem;
      margin-right: 1.95rem;
    }

    .item2 .right {
      flex: 1;
      height: 1.225rem;
      border: 1px solid rgba(153, 153, 153, 1);
      border-radius: 0.2rem;
      margin-right: 0.3rem;
      display: flex;
      align-items: center;
    }

    .item2 .right input {
      height: 1.225rem;
      line-height: 1.225rem;
      padding-left: 0.1rem;
      font-size: 0.6rem;
    }

    .btn {
      height: 1.8rem;
      background: url("__IMG__/shareh/btn-bg.png") center center no-repeat;
      background-size: 100%;
      text-align: center;
      line-height: 1.8rem;
      color: white;
      font-size: 0.7rem;
      margin-top: 4.275rem;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="phone">
    <div class="left">绑定的手机号</div>
    <div class="right">{$user_phone}</div>
  </div>
  <input type="hidden" id="phone2" value="{$user_phone2}" />
  <input type="hidden" id="user_id" value="{$user_id}" />
  <div class="item1">
    <div class="left"><input type="number" id="pwd" placeholder="验证码" /></div>
    <div class="right" onclick="sendcode(this);">获取验证码</div>
  </div>
  <div class="item2">
    <div class="left">积分买单支付密码</div>
    <div class="right"><input type="number" id="mima1" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6"></div>
  </div>
  <div class="item2">
    <div class="left">再次输入</div>
    <div class="right"><input type="number" id="mima2" oninput="value=value.replace(/[^\d]/g,'')" maxlength="6"></div>
  </div>
  <div class="btn" id="fast_login">确定</div>
</div>
</body>
<script type="text/javascript" src="__JS__/jquery.min.js"></script>

<script type="text/javascript">
    $('#fast_login').on('click',function (e) {
        var _phone = $('#phone2'),
            _pwd = $('#pwd'),
            p = 0,
            w = 0;
        if(_phone.val() == ""){
            alert('请输入手机号');
            return;
        }else{
            if(_phone.val().length < 11){
                alert('请输入正确的手机号');
                return;
            }else{
                p = 1;
            }
        }
        if(_pwd.val() == ""){
            alert('请输入验证码');
            return;
        }else{
            w = 1;
        }
        var user_id = $('#user_id').val();
        var mima1 = $('#mima1').val();
        var mima2 = $('#mima2').val();
        if(!mima1 || !mima2){
            alert('密码不能为空！');
            return;
        }
        if(mima1.length < 6 || mima2.length < 6){
            alert('密码必须是六位数字！');
            return;
        }
        if(mima1 != mima2){
            alert('密码不一致！');
            return;
        }
        if(p && w){
            $("#fast_login").attr('disabled','disabled').html('设置中...');
            $.ajax({
                url:"{:url('api/User/setPayPassword')}",
                type:'post',
                data:{phone:_phone.val(),code:_pwd.val(),user_id:user_id,password:mima1},
                dataType:'json',
                success:function(res){
                    if(res.status == 200){
                        setTimeout(function(){
                            history.go(-1);
                        },1500);
                    }else{
                        alert(res.msg);
                        $("#fast_login").removeAttr('disabled').html('确定');
                    }
                }
            })
        }
    })
    //发送验证码
    function sendcode(o){
        var obj= $(o);
        obj.removeAttr('onclick');
        if($('#phone2').val() == ""){
            obj.attr("onclick",'sendcode(this)');
            alert('请输入手机号');
            return;
        }else{
            if($('#phone2').val().length < 11){
                obj.attr("onclick",'sendcode(this)');
                alert('请输入正确的手机号');
                return;
            }else{
                $.ajax({
                    url:"{:url('api/Base/sendVerifyCode')}",
                    type:"post",
                    dataType:"json",
                    data:{type:1,phone:$('#phone2').val()},
                    success:function(res){
                        if(res.status == 200){
                            settime(obj);
                        }else{
                            obj.attr("onclick",'sendcode(this)');
                            alert(res.msg);
                            return;
                        }
                    }
                })

            }
        }
    }
    var countdown=60;
    function settime(obj) {
        obj.addClass('code_gray');
        if (countdown == 0) {
            obj.attr("onclick",'sendcode(this)');
            obj.html("获取验证码");
            obj.removeClass('code_gray');
            countdown = 60;
            return;
        } else {
            obj.html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {
            settime(obj)
        },1000)
    }
</script>
</html>
